<template>
  <div>
    <!-- <MBX level1="商品管理" level2="商品分类"></MBX> -->
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" style="font-size: 12px;margin-botton:20px">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体区域 -->
    <el-card class="mt16" style="margin-top:10px">
      <el-row>
        <el-col :span="2" >
          <el-button type="primary" @click="addCateDia" style="text-align: left"
            >添加分类</el-button
          >
        </el-col>
      </el-row>

      <!-- 分类表格数据 -->
      <el-table border class="mt16" :data="goodsCateData" row-key="cat_id" style="margin-top:10px">>
        <el-table-column label="#" type="index">
          <template slot-scope="scope">
            <div>{{ scope.row.index }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="分类名称"
          prop="cat_name"
          class="el-icon-arrow-down"
        ></el-table-column>
        <el-table-column label="是否有效">
          <template slot-scope="scope">
            <div>
              <i
                v-if="!scope.row.cat_deleted"
                class="el-icon-success"
                style="color: #1ad31a"
              ></i>
              <i v-else class="el-icon-arrow-down" style="color: #f00"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="排序">
          <template slot-scope="scope">
            <div>
              <el-tag :type="typeArr[scope.row.cat_level]">
                {{ scope.row.cat_level | rank }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="EditCateDia(scope.row)"
                >编辑</el-button
              >
              <el-button type="danger" size="mini" icon="el-icon-delete"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="queryInfo.pagenum"
        :page-sizes="[5, 10, 20, 30, 40]"
        :page-size="queryInfo.pagesize"
        layout="sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 添加分类对话框 -->
    <el-dialog @close="resetForm" title="添加分类" :visible.sync="isAddCate">
      <el-form :model="addCateForm">
        <el-form-item label="分类名称" label-width="80px">
          <el-input
            v-model="addCateForm.cat_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="父级分类" label-width="80px">
          <!-- 级联选择器 -->
          <!-- <p>{{ checkCateArr }}---父id:{{ current_cat_id }}</p> -->
          <el-cascader
            ref="twoCateRef"
            v-model="checkCateArr"
            :options="twoCateData"
            :props="defaultProps"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isAddCate = false">取 消</el-button>
        <el-button type="primary" @click="addCateOk">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑分类对话框 -->
    <el-dialog @close="resetForm" title="编辑分类" :visible.sync="isEditCate">
      <el-form :model="EditCateForm">
        <el-form-item label="分类名称" label-width="80px">
          <el-input
            v-model="EditCateForm.cat_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditCate = false">取 消</el-button>
        <el-button type="primary" @click="updateCateOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "goodscate",
  data() {
    return {
      isEditCate: false,
      EditCateForm: {
        cat_name: "",
      },
      checkCateArr: [],
      twoCateData: [],
      defaultProps: {
        checkStrictly: true,
        expandTrigger: "hover",
        label: "cat_name",
        children: "children",
        value: "cat_id",
      },
      //绑定分类数据
      addCateForm: {
        cat_name: "",
        cat_pid: "",
        cat_level: "",
      },
      isAddCate: false,
      typeArr: {
        0: "primary",
        1: "success",
        2: "warning",
      },
      //分类总条数
      total: 0,
      //分类数据
      goodsCateData: [],
      //查询条件
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
    };
  },
  created() {
    this.getGoodsCateList();
  },
  methods: {
    //确定更新
    async updateCateOk() {
      console.log("要更新的对象：", this.EditCateForm);
      const { cat_id: cadId, cat_name: catName } = this.EditCateForm;
      const res = await this.$API.editGoodsCateApi(cadId, catName);
      console.log(res);
      this.getGoodsCateList();
      this.isEditCate = false;
    },
    //打开编辑对话框
    EditCateDia(row) {
      console.log("row:", row);
      this.EditCateForm.cat_name = row.cat_name;
      this.EditCateForm.cat_id = row.cat_id;
      this.isEditCate = true;
    },
    //重置分类默认值
    resetForm() {
      this.addCateForm = {};
      this.checkCateArr = [];
    },
    //确定向后台添加数据
    async addCateOk() {
      if (this.checkCateArr.length !== 0) {
        this.addCateForm.cat_pid = this.current_cat_id;
        this.addCateForm.cat_level = this.checkCateArr.length;
      } else {
        this.addCateForm.cat_pid = 0;
        this.addCateForm.cat_level = 0;
      }
      //调添加分类接口
      const res = await this.$API.addGoodsCateApi(this.addCateForm);
      console.log(res);
      //刷新分类列表
      this.getGoodsCateList();
      //隐藏模态框
      this.isAddCate = false;
    },
    //监听选择分类改变的方法
    handleChange() {
      this.$refs.twoCateRef.dropDownVisible = false;
    },
    //打开添加分类对话框
    async addCateDia() {
      //调分类接口
      const res = await this.$API.getGoodsCateListApi({ type: 2 });
      console.log("二级分类：", res);
      this.twoCateData = res;
      console.log("twoCateRef:", this.$refs.twoCateRef);
      this.isAddCate = true;
    },
    handleSizeChange(val) {
      this.queryInfo.pagesize = val;
      this.getGoodsCateList();
    },
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val;
      this.getGoodsCateList();
    },
    async getGoodsCateList() {
      const res = await this.$API.getGoodsCateListApi(this.queryInfo);
      console.log("res:", res);
      const { total, result } = res;

      result.forEach((item, index) => {
        item.index = index + 1;
      });
      this.goodsCateData = result;
      this.total = total;
    },
  },
  computed: {
    current_cat_id() {
      return this.checkCateArr[this.checkCateArr.length - 1];
    },
  },
};
</script>

<style>
.el-radio {
  position: absolute;
  width: 100%;
  height: 25px;
}

.el-radio__inner {
  display: none;
}
</style>

<style lang="scss" scoped>
::v-deep .el-icon-arrow-down:before {
  content: "\2708";
}

.el-input,
.el-cascader {
  width: 80%;
}
</style>
